/* 
 修改脚手架默认生成的webpack配置项
 https://cli.vuejs.org/zh/config/#vue-config-js
 */
const { defineConfig } = require('@vue/cli-service')
const env = process.env.NODE_ENV
module.exports = defineConfig({
  /* 
  指定打包后导入资源文件的前缀 
    默认值“/”：这样需要把打包后的内容，部署到服务器根目录下，这样后期才可以找到资源
    我们可以把其修改为“./”：这样资源从当前HTML页面所在目录查找，不管部署到服务器的哪个目录下都可以
    而且有时候，我们会把地址统一改为CDN地址！
  */
  publicPath: './',
  /* 
   控制ESLint词法检测
     true/warning：会提示词法错误，但是不影响编译
     default/error：一但有词法错误，则编译失败
     false：不进行ESLint词法检测
   推荐：开发环境true、生产环境false「加快打包速度」
   */
  lintOnSave: env === 'development' ? true : false,
  /* 
   设置是否对node_modules中的第三方模块进行编译「例如：基于babel把ES6转为ES5」
     true：都会去检测编译一遍「这样会让打包速度变慢」
     false：不编译node_modules中的模块「推荐：一般第三方模块都是编译好的」
     数组：指定node_modules中的哪个模块进行编译，其余的不编译
   */
  transpileDependencies: false,
  /* 
   控制生产环境中，是否需要生成SourceMap调试文件
     true：生成「打包速度变慢」
     false：不生成
   真实项目中，我们几乎不会线上进行调试，一但产品上线，发现了BUG，会立即回滚到上一个版本
   */
  productionSourceMap: false,

  //---上述修改即便不懂webpack也可以玩，但是下述的操作，需要对webpack有一定的了解
  // https://cli.vuejs.org/zh/guide/webpack.html
  /* 新增(也可以修改)配置项 */
  configureWebpack: config => { },
  /* 基于链式写法，修改默认的配置项 */
  chainWebpack: config => { },
  /* 专门针对CSS加载器的设置 */
  css: {
    // requireModuleExtension: true,
    // extract: true/false,
    // sourceMap: false,
    loaderOptions: {
      less: {
        // 这里编写less-loader的相关配置
      }
    }
  },

  //---针对webpack-dev-server的配置
  devServer: {
    host: '127.0.0.1',
    open: true,
    proxy: {
      '/api': {
        target: 'https://www.jianshu.com/asimov',
        changeOrigin: true,
        ws: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
})

/*
 项目的浏览器兼容性处理
   Vue2/React的项目，无法兼容IE8及以下！！
   Vue3的项目，无法兼容IE！！
   @1 我们只需要修改 package.json/browserslist 即可
     默认的配置项中：
     + postcss-loader「含autoprefixer」会根据browserslist，自动给CSS3属性设置兼容的前缀
     + babel-loader「含语法包」会根据browserslist，自动把ES6语法转ES5语法

   @2 对于ES6内置API的兼容处理，需要基于@babel/polyfill
 */